<template>
	<view class="work-order">
		<view class="customer" @click="contactCustomer('bottom')">
			<view class="customer-text">
				<view class="text">联系客服</view>
				<uni-icons type="forward" size="24"></uni-icons>
			</view>
			<!-- <view class="line"></view>
			<view class="customer-time">周一至周五  9:00—17:30</view> -->
		</view>
		<view class="works">
			<view class="works-text" @click="goOrderSup">
				<view class="text">工单支持</view>
				<uni-icons type="forward" size="24"></uni-icons>
			</view>
			<view class="line"></view>
			<view class="works-time">
				提供产品使用咨询及基础技术支持(节假日除外，周一至周五(9:00-21:00)，周六(10:00-17:00))
			</view>
			<view class="suggest" @click="getRecord">查看服务记录</view>
		</view>
		<view class="customer">
			<view class="customer-text" @click="goSuggest">
				<view class="text">产品建议</view>
				<uni-icons type="forward" size="24"></uni-icons>
			</view>
			<view class="line"></view>
			<view class="customer-time">产品与服务相关优化建议</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" border-radius="16rpx 16rpx 0 0">
			<view class="popup-content">
				<view>请拨打热线</view>
				<view v-for="(item,index) in phoneList" :key="index" class="phone-item" @click="makePhone(item)">{{ item }}</view>
				<!-- <view class="phone-item"></view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneList: ['0851-85758817', '4006 309 568']
			}
		},
		methods: {
			goOrderSup() {
				uni.navigateTo({
					url: '/pages/serviceBack/orderSupport/index'
				})
			},
			goSuggest() {
				uni.navigateTo({
					url: '/pages/serviceBack/suggest/index'
				})
			},
			getRecord() {
				if(!uni.getStorageSync('apiticket')) {
					uni.showModal({
						title: "提示",
						content: "请登录",
						success: res => {
							if (res.confirm) {
								setTimeout(() => {
									uni.clearStorageSync()
									uni.navigateTo({
										url: "/pages/login/index",
									})
							  }, 1000);
							}
						}
					})
					return
				}
				uni.navigateTo({
					url: '/pages/serviceBack/orderSupport/serviceRecord'
				})
			},
			contactCustomer(type) {
				uni.navigateTo({
					url: '/pages/serviceBack/concatCustomer/concatCustomer'
				})
				// this.$refs.popup.open(type)
				// uni.makePhoneCall({
				// 	phoneNumber: '0851-85758817'
				// })
			},
			makePhone(item) {
				uni.makePhoneCall({
					phoneNumber: item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-order {
		margin: 20rpx 36rpx;
	}
	.customer {
		background: #fff;
		padding: 20rpx 32rpx 16rpx 32rpx;
		border-radius: 20rpx;
		.customer-text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #{$one-title-color};
		}
		.customer-time {
			font-size: #{$auxiliary-size};
			color: #{$sub-color};
		}
	}
	.works {
		background: #fff;
		padding: 28rpx 32rpx;
		border-radius: 20rpx;
		margin: 20rpx 0;
		.works-text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #{$one-title-color};
		}
		.works-time {
			font-size: #{$auxiliary-size};
			color: #{$sub-color};
			line-height: 40rpx;
		}
	}
	.suggest {
		font-size: #{$auxiliary-size};
		color: #47ACF5;
		margin-top: 20rpx;
	}
	.line {
		border-bottom: 1px solid #f5f5f5;
		margin: 20rpx 0;
	}
	
	.popup-content {
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 15px;
		height: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		
		.phone-item {
			margin-top: 20rpx;
			color: #47ACF5;
			padding: 20rpx 0;
		}
	}
</style>